<template>
	<view class="search-page">
		<!-- top 搜索框 -->
		<view class="inp-search">
			<!-- 返回 -->
			<view class="back-off" @click="back">
				<uni-icons type="back" size="35"></uni-icons>
			</view>
			<!-- 搜索框 -->
			<view class="search-bar-box">
				<view class="search-left">
					<image class="search-span" src='../../static/search.png' />
					<input type="text" value="" placeholder="搜索油站名称/地址" class="search-text" maxlength="10" focus
						v-model="value" />
				</view>
				<view class="">
					<button class="search-btn">搜索</button>
				</view>
				
			</view>
		</view>
		<!-- 附近的品牌加油站 -->
		<view class="nearby-oil">
			<!-- 标题 -->
			<view class="nearby-title">附近的品牌加油站</view>
			<!-- 加油站 -->
			<view class="selected-bottom ">
				<view class="gas-station">
					<view class="gas-stations" v-for="(item,indexs) in nearbyOil" :key="index">
						<view class="stations-top">
							<view class="sta-left-name ">
								<view class="sta-left-names">{{item.gasName}}</view>
								<view class="sta-left-yx">优选</view>
							</view>
							<view class="flex">
								<view class="sta-left-posi">
									{{item.position}}
								</view>
								<view class="sta-left-kilo">
									{{item.distance}}
								</view>
							</view>
							<view class="sta-price">
								<view class="sta-price-new">
									￥ <text class="big">{{item.price}}</text>/L
								</view>
								<view class="sta-price-older">
									{{item.originalPrice}}
								</view>
							</view>
							<view class="sta-bottom flex">
								<view class="bot-left">
									<view class="left-top">完单返加油金 <text>{{item.rebate}}</text> /升</view>
									<view class="bot-bot">{{item.accumulate}}</view>
								</view>
								<view class="bot-right">立即加油</view>
							</view>
			
						</view>
					</view>
			
				</view>
			
			</view>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				nearbyOil: [
					{
						gasName: '小海豚加油站（桃花峪站）',
						position: '东岳大街西段山和院子',
						distance: '6.11km',
						price: '6.88',
						originalPrice: '油站价￥7.68/L',
						rebate: '0.80',
						accumulate: '累计消费返豪礼',

					},
					{
						gasName: '金城加油站（济南）',
						position: '党家庄镇县邵而庄西村以东',
						distance: '6.11km',
						price: '7.45',
						originalPrice: '油站价￥7.68/L',
						rebate: '0.80',
						accumulate: '累计消费返豪礼',

					}, 
					{
						gasName: '中胜石油东岳大街站',
						position: '东岳大街西段山和院子',
						distance: '6.11km',
						price: '6.88',
						originalPrice: '油站价￥7.68/L',
						rebate: '0.80',
						accumulate: '累计消费返豪礼',

					},
					{
						gasName: '京博石化济南50站',
						position: '东岳大街西段山和院子',
						distance: '6.11km',
						price: '6.88',
						originalPrice: '油站价￥7.68/L',
						rebate: '0.80',
						accumulate: '累计消费返豪礼',

					},
					{
						gasName: '中远石油文庄加油站',
						position: '东岳大街西段山和院子',
						distance: '6.11km',
						price: '6.88',
						originalPrice: '油站价￥7.68/L',
						rebate: '0.80',
						accumulate: '累计消费返豪礼',

					},
					{
						gasName: '中远石油文庄加油站',
						position: '东岳大街西段山和院子',
						distance: '6.11km',
						price: '6.88',
						originalPrice: '油站价￥7.68/L',
						rebate: '0.80',
						accumulate: '累计消费返豪礼',
					
					},
					{
						gasName: '中远石油文庄加油站',
						position: '东岳大街西段山和院子',
						distance: '6.11km',
						price: '6.88',
						originalPrice: '油站价￥7.68/L',
						rebate: '0.80',
						accumulate: '累计消费返豪礼',
					
					},
					{
						gasName: '中远石油文庄加油站',
						position: '东岳大街西段山和院子',
						distance: '6.11km',
						price: '6.88',
						originalPrice: '油站价￥7.68/L',
						rebate: '0.80',
						accumulate: '累计消费返豪礼',
					
					},
					{
						gasName: '中远石油文庄加油站',
						position: '东岳大街西段山和院子',
						distance: '6.11km',
						price: '6.88',
						originalPrice: '油站价￥7.68/L',
						rebate: '0.80',
						accumulate: '累计消费返豪礼',
					
					},
					{
						gasName: '中远石油文庄加油站',
						position: '东岳大街西段山和院子',
						distance: '6.11km',
						price: '6.88',
						originalPrice: '油站价￥7.68/L',
						rebate: '0.80',
						accumulate: '累计消费返豪礼',
					
					},
					{
						gasName: '中远石油文庄加油站',
						position: '东岳大街西段山和院子',
						distance: '6.11km',
						price: '6.88',
						originalPrice: '油站价￥7.68/L',
						rebate: '0.80',
						accumulate: '累计消费返豪礼',
					
					},
					{
						gasName: '中远石油文庄加油站',
						position: '东岳大街西段山和院子',
						distance: '6.11km',
						price: '6.88',
						originalPrice: '油站价￥7.68/L',
						rebate: '0.80',
						accumulate: '累计消费返豪礼',
					
					},
					{
						gasName: '中远石油文庄加油站',
						position: '东岳大街西段山和院子',
						distance: '6.11km',
						price: '6.88',
						originalPrice: '油站价￥7.68/L',
						rebate: '0.80',
						accumulate: '累计消费返豪礼',
					
					},
					{
						gasName: '中远石油文庄加油站',
						position: '东岳大街西段山和院子',
						distance: '6.11km',
						price: '6.88',
						originalPrice: '油站价￥7.68/L',
						rebate: '0.80',
						accumulate: '累计消费返豪礼',
					
					},
					
					
					
				],
			}
		},
		onLoad() {},
		// 定义方法
		methods: {
			back:function(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}	
		},


	}
</script>

<style>
	@import url('/pages/index/index.css');
</style>
